<template>
  <div class="user-detail-page mx-auto max-w-7xl">
    <div class="detail-title flexbox flex-align-center flex-justify-between">
      <span class="text">{{ $t('userDetail.editUserInfoText') }}</span>
      <img
        class="close-btn"
        src="https://cd.sealmg.com/assets/img/close-icon.png"
        alt="Close button"
        title="Return to previous page"
        loading="lazy"
        @click="goBackPre"
      />
    </div>
    <div class="mobile-tabs">
      <div class="tabs flexbox flex-align-center">
        <div :class="['tab', tabId == item.id ? 'active' : '']" v-for="item in detailTabList" :key="item.id" @click="detailChangeTab(item)">
          {{ item.name }}
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="cont-box flexbox">
      <div class="left-tab">
        <div class="list">
          <div class="flex flex-col">
            <div
              class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 w-full cursor-pointer"
              v-for="item in detailTabList"
              :key="item.id"
              @click="jumpto(item)"
            >
              <!-- 
              :class="tabId == item.id ? 'selectbackground ' : 'text-[#666666]'"
            -->
              <div class="flex gap-3 items-center w-full">
                <div class="size-[1.13rem]">
                  <img v-lazy="item.icon" loading="lazy" :alt="item.icon" class="size-full flex-none" />
                </div>
                <span class="font-medium text-[0.88rem] line-clamp-1 capitalize">
                  {{ item.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-con">
        <!-- {{ detailTabName }} -->
        <div class="title !block">
          <div class="flexbox flex-align-center flex-justify-between flex flex-row">
            <h1 class="name capitalize">{{ detailTabName }}</h1>
          </div>
        </div>
        <div class="mode-cont info-cont" v-if="tabId == 'info'">
          <div class="item-cont-row">
            <div class="row-label capitalize">{{ $t('userDetail.myAvatar') }}</div>
            <div class="row-avator flexbox flex-align-center flex-justify-between">
              <img
                v-if="userInfo.avator"
                class="avator-img object-cover"
                v-lazy="$globalFn.imgPrefixUrl(userInfo.avator, '72:72')"
                :alt="userInfo.avator"
                loading="lazy"
                @click="clickUpload"
              />

              <UploadFile ref="uploadfile" showType="btn" @uploadSuccess="uploadSuccess" />
            </div>
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('userDetail.userNickeName') }}</div>
            <div class="row-input margin-bottom not-bottom{">
              <el-input v-model="userInfo.name" :minlength="2" :maxlength="32" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
            <!-- <div class="row-desc">{{$t('formRule.userName')}}</div> -->
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('pages.mailbox') }}</div>
            <div class="row-input flex relative gap-4 items-center">
              <el-input v-model="userInfo.email" :placeholder="$t('pages.qmailbox')"></el-input>
              <div
                @click="changeemail"
                class="bg-[#FFFFFF] cursor-pointer active:scale-90 duration-300 absolute right-4 top-1/2 -translate-y-1/2 rounded-[1.19rem] px-6 py-1 border text-nowrap text-[0.88rem] text-[#262626]"
              >
                {{ $t('pages.changeemail') }}
              </div>
            </div>
          </div>
          <!-- <div class="item-cont-row">
            <div class="row-label">{{ $t("pages.cellPhonenumber") }}</div>
            <div class="row-input">
              <el-input
                v-model="userInfo.phone"
                :placeholder="$t('pages.qcellPhonenumber')"
              ></el-input>
            </div>
          </div> -->
          <div class="handle flexbox flex-align-center !justify-center flex !flex !w-full">
            <!-- &&userInfo.email&&userInfo.phone -->
            <!-- <el-button
              class="default-btn"
              :disabled="userInfo.avator && userInfo.name ? false : true"
              @click="resetInfoForm"
              >{{ $t("formBtn.reset") }}</el-button
            > -->
            <!-- &&userInfo.email&&userInfo.phone -->
            <!-- &&checkUserName -->
            <el-button
              class="theme-btn max-lg:!w-full"
              :disabled="userInfo.avator && userInfo.name ? false : true"
              :loading="btnLoading"
              @click="svaeInfoForm"
              >{{ $t('formBtn.save') }}</el-button
            >
          </div>
        </div>
        <div class="mode-cont password-cont" v-if="tabId == 'password'">
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.curpwd') }}</div>
            <div class="row-input margin-bottom not-bottom">
              <el-input show-password v-model="userPassword.curpwd" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.newpwd') }}</div>
            <div class="row-input">
              <el-input show-password v-model="userPassword.newpwd" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
            <LazyPwdCheck ref="pwdcheck" :targetVal="userPassword.newpwd" />
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.confirmPassword') }}</div>
            <div class="row-input">
              <el-input show-password v-model="userPassword.newpwdAgain" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
            <div class="row-desc">{{ $t('formItem.againConfirmpwd') }}</div>
          </div>
          <div class="handle flexbox flex-align-center">
            <el-button
              class="default-btn"
              :disabled="userPassword.curpwd && userPassword.newpwd && userPassword.newpwdAgain ? false : true"
              @click="resetPasswordForm"
            >
              {{ $t('formBtn.reset') }}
            </el-button>
            <el-button class="theme-btn" :disabled="func()" :loading="btnLoading" @click="svaePasswordForm">{{ $t('formBtn.save') }} </el-button>
          </div>
        </div>
        <div class="mode-cont phone-cont" v-if="tabId == 'phone'">
          <template v-if="true">
            <div class="item-cont-row">
              <div class="row-label">{{ $t('formItem.countryRegion') }}</div>
              <div class="row-input">
                <!-- <el-cascader ref="countryRef" class="input" v-model="countryText" :options="countryList" :props="countryProps" :show-all-levels="false" @change="countryChange" style="width:100%"></el-cascader> -->
                <el-select
                  class="input"
                  filterable
                  v-model="userPhone.country"
                  :placeholder="$t('formPlaceholder.input')"
                  @change="countryChange"
                  style="width: 100%"
                >
                  <!-- <template slot="prefix">
                                    <img class="icon" src="https://cd.sealmg.com/assets/img/mobile/lang-icon.png" alt="" srcset="">
                                </template> -->
                  <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
                </el-select>
              </div>
            </div>
            <div class="item-cont-row" style="margin-bottom: 42px">
              <div class="row-label">{{ $t('userInfo.phoneNum') }}</div>
              <div class="row-input flexbox flex-align-center">
                <el-input class="input-phone" v-model="userPhone.phone" :placeholder="$t('formPlaceholder.input')">
                  <span slot="prefix" class="phone-prefix">{{ userPhone.prefix }}</span>
                </el-input>
                <el-button :class="['send-btn', userPhone.country && userPhone.phone ? '' : 'disabled']" @click="sendPhoneCode">{{
                  $t('formBtn.getCode')
                }}</el-button>
              </div>
            </div>
            <div class="item-cont-row">
              <div class="row-label">{{ $t('formItem.verifyCode') }}</div>
              <div class="row-input">
                <el-input v-model="userPhone.code" :placeholder="$t('formPlaceholder.input')"></el-input>
              </div>
            </div>
            <div class="handle flexbox flex-align-center">
              <!-- <el-button :class="['reset-btn', userPhone.country&&userPhone.phone&&userPhone.code?'':'disabled']" @click="resetPhoneForm">{{$t('formBtn.reset')}}</el-button> -->
              <el-button :class="['save-btn', userPhone.country && userPhone.phone && userPhone.code ? '' : 'disabled']" @click="svaePhoneForm">{{
                $t('formBtn.verifyPhone')
              }}</el-button>
            </div>
          </template>
          <div class="item-cont-row" v-if="false">
            <div class="row-desc" style="margin-top: 0">
              {{ $t('formItemDesc.phonePass') }}
            </div>
            <div class="row-bind flexbox flex-align-center flex-justify-between">
              <div class="bind-left flexbox flex-align-center">
                <span class="bind-frefix">+86</span>
                <span class="bind-text">13254645668</span>
              </div>
              <div class="bind-right">
                <img
                  class="has-bind"
                  src="https://cd.sealmg.com/assets/img/bind-has-icon.png"
                  alt="https://cd.sealmg.com/assets/img/bind-has-icon.png"
                  loading="lazy"
                  srcset=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="mode-cont link-cont" v-if="tabId == 'link'">
          <div class="item-cont-row max-sm:!mb-[0px]" v-for="(item, index) in userOtherBind" :key="index">
            <div class="row-bind flexbox flex-align-center flex-justify-between max-sm:!mb-[0px]">
              <div class="bind-left flexbox flex-align-center">
                <img loading="lazy" class="icon" v-if="item.icon" v-lazy="$globalFn.imgPrefixUrl(item.icon)" :alt="item.icon" srcset="" />
                <div class="bind-frefix">{{ item.platform_name }}</div>
              </div>
              <div class="bind-right flexbox flex-align-center flex-justify-between flex-1">
                <span :class="['bind-text', item.is_bind ? '' : 'no-bind-text']">{{ item.is_bind ? item.nickname : $t('status.noBind') }}</span>
                <!-- 未绑定 -->
                <img
                  class="no-bind"
                  v-if="!item.is_bind"
                  src="https://cd.sealmg.com/assets/img/arrow-right-edit.png"
                  alt="https://cd.sealmg.com/assets/img/arrow-right-edit.png"
                  srcset=""
                  :loading="btnLoading"
                  @click="bindOtherAccount(item)"
                />
                <!-- 已绑定 -->
                <img
                  class="has-bind"
                  loading="lazy"
                  v-else
                  src="https://cd.sealmg.com/assets/img/bind-has-icon.png"
                  alt="https://cd.sealmg.com/assets/img/bind-has-icon.png"
                  srcset=""
                  @click="showUnbindOther(item)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="address-title" v-if="tabId == 'address'">
          <div class="mode-title">{{ $t('userDetail.addressBillText') }}</div>
          <div class="mode-desc">
            {{ $t('userDetail.addressBillTextDesc') }}
          </div>
        </div>
        <div class="mode-cont address-cont" v-if="tabId == 'address'">
          <div class="flexbox flex-align-center">
            <div class="item-cont-row flex-1" style="margin-right: 10px">
              <div class="row-label">{{ $t('formItem.name') }}</div>
              <div class="row-input">
                <el-input v-model="userAddress.name" :placeholder="$t('formPlaceholder.input')"></el-input>
              </div>
            </div>
            <div class="item-cont-row flex-1" style="margin-left: 10px">
              <div class="row-label">{{ $t('formItem.surname') }}</div>
              <div class="row-input">
                <el-input v-model="userAddress.surname" :placeholder="$t('formPlaceholder.input')"></el-input>
              </div>
            </div>
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.address') }}</div>
            <div class="row-input">
              <el-input type="textarea" v-model="userAddress.address" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.postalCode') }}</div>
            <div class="row-input">
              <el-input v-model="userAddress.postalCode" :placeholder="$t('formPlaceholder.input')"></el-input>
            </div>
          </div>
          <div class="item-cont-row">
            <div class="row-label">{{ $t('formItem.countryRegion') }}</div>
            <div class="row-input">
              <LazyCountrySelect class="input" :showPrefix="false" @itemChange="countryChange2" />
            </div>
          </div>
          <div class="handle flexbox flex-align-center">
            <el-button
              class="default-btn"
              :disabled="
                userAddress.name && userAddress.surname && userAddress.address && userAddress.postalCode && userAddress.country ? false : true
              "
              @click="resetAddressForm"
              >{{ $t('formBtn.reset') }}</el-button
            >
            <el-button
              class="theme-btn"
              :disabled="
                userAddress.name && userAddress.surname && userAddress.address && userAddress.postalCode && userAddress.country ? false : true
              "
              :loading="btnLoading"
              @click="svaeAddressForm"
              >{{ $t('formBtn.save') }}</el-button
            >
          </div>
        </div>
        <div class="mode-cont logout-cont" v-if="tabId == 'logout'">
          <div class="item-avator flexbox flex-align-center">
            <!-- <img
              class="avator"
              v-lazy="$globalFn.imgPrefixUrl(userInfo.avator, '80:80')"
              alt=""
              srcset=""
            /> -->
            <img
              class="avator object-cover flex-none"
              v-lazy="$globalFn.imgPrefixUrl(userInfo.avator, '80:80')"
              lazy
              loading="lazy"
              :alt="userInfo.avator"
            />
            <div class="info">
              <div class="name line-clamp-1">{{ userInfo.name }}</div>
              <div class="id">
                <span class="text">ID：{{ userInfo.uid }}</span>
              </div>
            </div>
          </div>
          <div class="desc" v-if="$t('userDetail.removeAccountDescList') && $t('userDetail.removeAccountDescList').length">
            <div class="desc-item" v-for="(item, index) in $t('userDetail.removeAccountDescList')" :key="index">
              {{ item.text }}
            </div>
          </div>
          <div class="remark" v-if="$t('userDetail.removeAccountNoticeList') && $t('userDetail.removeAccountNoticeList').length">
            <div class="remark-title">
              {{ $t('userDetail.removeAccountNoticeTitle') }}
            </div>
            <div class="remark-item" v-for="(item, index) in $t('userDetail.removeAccountNoticeList')" :key="index">
              {{ item.text }}
            </div>
          </div>
          <el-button class="theme-btn" @click="showRemove = true"> {{ $t('formBtn.deleteAccount') }}</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      class="confirm-dialog delete-dialog"
      title=""
      width="522px"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="showRemove"
    >
      <div class="flexbox flex-tb flex-align-center box-content pt-4">
        <div class="title capitalize">{{ $t('confirmDialog.removeTips') }}</div>
        <div class="title-desc capitalize">
          {{ $t('confirmDialog.removeAccountDesc') }}
        </div>
      </div>
      <div class="handle flexbox flex-align-center flex-justify-between">
        <el-button class="btn cancle-btn" @click="showRemove = false"> {{ $t('formBtn.cancel') }}</el-button>
        <el-button class="btn theme-plain-btn" :loading="btnLoading" @click="removeAccount">{{ $t('formBtn.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 取消绑定弹框 -->
    <el-dialog class="confirm-dialog unbind-dialog" title="" width="522px" :show-close="false" :close-on-click-modal="false" :visible.sync="showBind">
      <div class="flexbox flex-tb flex-align-center box-content py-4">
        <div class="title">{{ $t('confirmDialog.removeBind') }}</div>
        <div class="title-desc">{{ $t('confirmDialog.removeBindDesc') }}</div>
        <div class="concat flexbox flex-align-center flex-justify-center">
          <img class="img" v-if="curBindInfo.icon" v-lazy="$globalFn.imgPrefixUrl(curBindInfo.icon)" alt="" srcset="" loading="lazy" />
          <img class="icon" src="https://cd.sealmg.com/assets/img/concat-img.png" alt="" srcset="" loading="lazy" />
          <img class="img" loading="lazy" src="https://cd.sealmg.com/assets/img/logo3.png" alt="" srcset="" />
        </div>
      </div>
      <div class="handle flexbox flex-align-center flex-justify-between">
        <el-button class="btn cancle-btn" @click="cancleBtn"> {{ $t('formBtn.cancel') }}</el-button>
        <el-button class="btn theme-plain-btn" :loading="btnLoading" @click="unBindOtherAccount">{{ $t('confirmDialog.removeBind') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import PwdCheck from '@/components/PwdCheck'
  let userAccountIcon = 'https://cd.sealmg.com/assets/img/user-account.png'
  let userPasswordIcon = 'https://cd.sealmg.com/assets/img/user-password.png'
  let userPhoneIcon = 'https://cd.sealmg.com/assets/img/user-phone.png'
  let userLinkIcon = 'https://cd.sealmg.com/assets/img/user-link.png'
  let userAddressIcon = 'https://cd.sealmg.com/assets/img/user-address.png'
  let userLogoutIcon = 'https://cd.sealmg.com/assets/img/user-logout.png'
  import { throttle } from '@/static/js/common'
  export default {
    layout: 'custom-temp',
    name: 'userDetail',
    components: {
      PwdCheck
    },
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: 'User Center - Account Settings',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Manage your account settings including profile, password, linked accounts and billing address'
          }
        ]
      }
    },
    data() {
      return {
        btnLoading: false,
        tabId: '',
        detailTabName: '',
        type: '',
        detailTabList: [
          {
            id: 'info',
            name: this.$t('userDetail.userProfile'),
            icon: userAccountIcon,
            type: 1
          },
          {
            id: 'password',
            name: this.$t('userDetail.changePassword'),
            icon: userPasswordIcon,
            type: 2
          },
          // {id:'phone',name:this.$t('userInfo.phoneNum'),icon:userPhoneIcon},
          {
            id: 'link',
            name: this.$t('userDetail.snsLink'),
            icon: userLinkIcon,
            type: 3
          },
          {
            id: 'address',
            name: this.$t('userDetail.billingAddress'),
            icon: userAddressIcon,
            type: 4
          },
          {
            id: 'logout',
            name: this.$t('userDetail.removeAccount'),
            icon: userLogoutIcon,
            type: 5
          }
        ],
        countryList: [],
        curCountry: {},
        userInfo: {
          avator: '',
          name: '',
          email: '',
          phone: '',
          uid: ''
        },
        userPassword: {
          curpwd: '',
          newpwd: '',
          newpwdAgain: ''
        },
        userPhone: {
          country: '',
          prefix: '',
          phone: '',
          code: ''
        },
        showBind: false,
        curBindInfo: {},
        userOtherBind: [],
        userAddress: {
          id: '',
          name: '',
          surname: '',
          address: '',
          postalCode: '',
          country: '',
          province: '',
          city: ''
        },
        showRemove: false,
        countryText: [],
        countryProps: {
          label: 'name',
          value: 'id',
          children: '_child'
        },
        userSelectInfo: {},
        targetCountry: {}
      }
    },
    computed: {
      checkUserName() {
        let reg = /^[a-zA-Z0-9]{6,32}$/
        return reg.test(this.userInfo.name)
      }
      // countryList(){
      //     let initData=this.$store.state.initData.initData
      //     return  initData.regions||[]
      // },
      // countryList(){
      //     let initData=this.$store.state.initData.initData
      //     let list=[]
      //     if(initData.regions&&initData.regions.length){
      //         initData.regions.map(item=>{
      //             if(item._child&&item._child.length){
      //                 list.push(...item._child)
      //             }
      //         })
      //     }
      //     return list || []
      // },
    },
    async asyncData({ query }) {
      return {
        type: query.type,
        tabId: query.type
      }
    },
    created() {
      if (process.server) return
      if (!this.$cookies.get('token')) {
        this.$router.push({
          path: this.localePath('/login')
        })
      }
      this.targetCountry = this.$cookies.get('userSelect') || {}
      let query = this.$route.query
      if (query.type) {
        this.tabId = query.type
      } else {
        this.tabId = 'info'
      }
      this.initData()
      // if (query.type == 'link' && query.platform && query.code) {
      //   //?/api/user/thirdBindCallback?platform=facebook&code=
      //   this.$axios
      //     .get(`/api/user/thirdBindCallback`, {
      //       params: {
      //         platform: query.platform,
      //         code: query.code
      //       }
      //     })
      //     .then(res => {
      //       // this.$store.commit('user/setToken',res.token||'')
      //       // this.$store.commit('user/setUserInfo',res||{})
      //       if (process.client) {
      //         setTimeout(() => {
      //           window.location.href = window.location.origin
      //         }, 500)
      //       }
      //     })
      // }
      this.$axios.get(`/api/area/getAreaTree`).then(res => {
        this.countryList = res || []
        // ;
      })
    },
    methods: {
      func() {
        if (
          this.userPassword.curpwd &&
          this.userPassword.newpwd &&
          this.userPassword.newpwdAgain &&
          this.userPassword.newpwd == this.userPassword.newpwdAgain &&
          this.$refs.pwdcheck.checkRes
        ) {
          return false
        }
        return true
      },
      changeemail() {
        let email = this.userInfo.email
        this.$router.push({
          path: this.localePath(`/change-email`),
          query: {
            email
          }
        })
      },
      jumpto(item) {
        this.$router.push({
          path: this.localePath(`/userDetail`),
          query: {
            type: item.id
          }
        })
      },
      getBack() {
        this.$router.back()
      },
      initData() {
        if (this.tabId) {
          let list = this.detailTabList.filter(item => item.id == this.tabId)
          this.detailTabName = list[0].name || ''
        }
        if (this.tabId == 'info' || this.tabId == 'logout') {
          this.getUserInfo()
        } else if (this.tabId == 'link') {
          this.getOtherBind()
        } else if (this.tabId == 'address') {
          this.getAddressInfo()
        }
      },
      getUserInfo() {
        this.$axios.get(`/api/user/getUserInfo`).then(res => {
          this.userInfo = {
            avator: res.avatar,
            name: res.nickname,
            email: res.email,
            phone: res.mobile,
            uid: res.uid
          }
        })
      },
      getOtherBind() {
        this.$axios.get(`/api/user/getSns`).then(res => {
          this.userOtherBind = res || []
        })
      },
      cancleBtn() {
        this.showBind = false
      },
      showUnbindOther(item) {
        this.curBindInfo = item
        this.showBind = true
      },
      // 取消绑定
      unBindOtherAccount: throttle(
        function () {
          this.btnLoading = true
          this.$axios
            .get(`/api/user/thirdUnBind?platform=${this.curBindInfo.platform}`, {
              setConfig: { showSuccessMsg: true }
            })
            .then(res => {
              this.btnLoading = false
              this.initData()
              this.cancleBtn()
              // this.getBack();
            })
            .catch(err => {
              this.btnLoading = false
            })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      // 绑定
      bindOtherAccount: throttle(
        function (item) {
          this.btnLoading = true
          this.$axios
            .get(`/api/user/thirdBind?platform=${item.platform}`, {
              setConfig: { showSuccessMsg: false }
            })
            .then(res => {
              this.btnLoading = false
              if (process.client) {
                window.location.href = res
              }
            })
            .catch(err => {
              this.btnLoading = false
            })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      getAddressInfo() {
        this.$axios.get('/api/user_address/read').then(res => {
          if (res) {
            this.targetCountry.name = res.country
            this.userAddress = {
              id: res.id,
              name: res.name,
              surname: res.surname,
              postalCode: res.zip,
              address: res.address,
              country: res.country ? Number(res.country) : '',
              province: res.province ? Number(res.province) : '',
              city: res.city ? Number(res.city) : ''
            }
            if (this.userAddress.country) {
              this.countryText[0] = this.userAddress.country
            }
            if (this.userAddress.province) {
              this.countryText[1] = this.userAddress.province
            }
            if (this.userAddress.city) {
              this.countryText[2] = this.userAddress.city
            }
          }
        })
      },
      goBackPre() {
        // this.$router.back();
        this.$router.push({
          path: this.localePath('/user/account?type=1')
        })
      },
      detailChangeTab(item) {
        //this.tabId=item.id
        //this.detailTabName=item.name
        //this.initData()
        this.$router.replace({
          path: this.localePath('/userDetail'),
          query: {
            type: item.id
          }
        })
      },
      clickUpload() {
        if (process.client && this.$refs.uploadfile.$refs.upload.$el && this.$refs.uploadfile.$refs.upload.$el.querySelector('.upload-btn')) {
          this.$refs.uploadfile.$refs.upload.$el.querySelector('.upload-btn').click()
        }
      },
      uploadSuccess(img) {
        this.userInfo.avator = img
      },
      resetInfoForm() {
        this.userInfo = {
          avator: this.userInfo.avator,
          name: '',
          email: '',
          phone: ''
        }
      },
      svaeInfoForm: throttle(
        function () {
          //&&this.userInfo.email&&this.userInfo.phone
          if (this.userInfo.avator && this.userInfo.name) {
            this.btnLoading = true
            this.$axios
              .post(
                `/api/user/profile`,
                {
                  nickname: this.userInfo.name,
                  avatar: this.userInfo.avator,
                  phone: this.userInfo.phone,
                  email: this.userInfo.email
                },
                { setConfig: { showSuccessMsg: true } }
              )
              .then(res => {
                this.btnLoading = false
                this.$store.dispatch('user/getUserInfo')
                this.getBack()
              })
              .catch(err => {
                this.btnLoading = false
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      resetPasswordForm() {
        this.userPassword = {
          curpwd: '',
          newpwd: '',
          newpwdAgain: ''
        }
      },
      svaePasswordForm: throttle(
        function () {
          if (!this.$refs.pwdcheck.checkRes) {
            return
          }
          if (this.userPassword.curpwd && this.userPassword.newpwd && this.userPassword.newpwdAgain) {
            this.btnLoading = true
            this.$axios
              .post(
                '/api/user/changepwd',
                {
                  password: this.userPassword.curpwd,
                  newpassword: this.userPassword.newpwd
                },
                { setConfig: { showSuccessMsg: true } }
              )
              .then(res => {
                this.btnLoading = false
                this.resetPasswordForm()
                this.getBack()
              })
              .catch(err => {
                this.btnLoading = false
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      countryChange(item) {
        let list = this.countryList.filter(item => item.name === this.userPhone.country)
        this.curCountry = list.length ? list[0] : {}
        this.userPhone.prefix = this.curCountry.phone_code
      },
      countryChange1(item) {
        this.countryText = item
        if (item.length) {
          this.userAddress.country = item[0]
        } else {
          this.userAddress.country = ''
        }
        if (item.length > 1) {
          this.userAddress.province = item[1]
        } else {
          this.userAddress.province = ''
        }
        if (item.length > 2) {
          this.userAddress.city = item[2]
        } else {
          this.userAddress.city = ''
        }
      },
      countryChange2(item) {
        //this.userSelectInfo.country_code=item.iso||item.country_code
        // this.userSelectInfo.language_code=item.language_code
        // this.userSelectInfo.currency_code=item.currency_code
        this.targetCountry = item
        this.userAddress.country = item.name
      },
      sendPhoneCode: throttle(
        function () {
          if (this.userPhone.country && this.userPhone.phone) {
            this.$axios
              .post(
                '/api/sms/send',
                {
                  event: 'register',
                  mobile: this.userPhone.phone
                },
                { setConfig: { showSuccessMsg: true } }
              )
              .then(res => {})
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      resetPhoneForm() {
        this.userPhone = {
          country: '',
          prefix: '',
          phone: '',
          code: ''
        }
      },
      changeCountry() {
        this.userPhone = {
          country: this.userPhone.country,
          prefix: '+86',
          phone: '',
          code: ''
        }
      },
      svaePhoneForm: throttle(
        function () {
          if (this.userPhone.country && this.userPhone.phone && this.userPhone.code) {
            this.$axios
              .post(
                '/api/user/changemobile',
                {
                  captcha: this.userPhone.code,
                  mobile: this.userPhone.phone
                },
                { setConfig: { showSuccessMsg: true } }
              )
              .then(res => {
                this.getBack()
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      resetAddressForm() {
        this.userAddress = {
          name: '',
          surname: '',
          address: '',
          postalCode: '',
          country: '',
          province: '',
          city: ''
        }
      },
      svaeAddressForm: throttle(
        function () {
          if (
            this.userAddress.name &&
            this.userAddress.surname &&
            this.userAddress.address &&
            this.userAddress.postalCode &&
            this.userAddress.country
          ) {
            let opts = {
              name: this.userAddress.name,
              surname: this.userAddress.surname,
              zip: this.userAddress.postalCode,
              country: this.userAddress.country,
              province: this.userAddress.province,
              city: this.userAddress.city,
              address: this.userAddress.address
            }
            if (this.userAddress.id) {
              opts['id'] = this.userAddress.id
            }
            this.btnLoading = true
            this.$axios
              .post(opts.id ? '/api/user_address/update' : '/api/user_address/add', opts, { setConfig: { showSuccessMsg: true } })
              .then(res => {
                this.btnLoading = false
                this.getBack()
              })
              .catch(err => {
                this.btnLoading = false
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      removeAccount: throttle(
        function () {
          this.btnLoading = true
          this.$axios
            .post(`/api/user/cancel`, {}, { setConfig: { showSuccessMsg: true } })
            .then(res => {
              this.btnLoading = false
              this.$store.commit('user/resetData')
              this.$router.replace(this.localePath('/'))
              this.showRemove = false
              if (process.client) {
                setTimeout(() => {
                  window.location.reload()
                }, 500)
              }
            })
            .catch(err => {
              this.btnLoading = false
            })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%);
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }

  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }

  .user-detail-page {
    .detail-title {
      height: 120px;

      .text {
        font-weight: 500;
        font-size: 24px;
        color: @font-color-14;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        cursor: pointer;
      }
    }

    .cont-box {
      padding-bottom: 106px;
    }

    .mobile-tabs {
      display: none;
    }

    .left-tab {
      width: 387px;

      .list {
        .item {
          box-sizing: border-box;
          padding: 0 16px;
          width: 336px;
          height: 56px;
          cursor: pointer;

          .left {
            .icon {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }

            .text {
              font-weight: 600;
              font-size: 14px;
              color: @font-color-26;
            }
          }

          .right {
          }
        }

        .item.active {
          background: @input-focus-bg;
          border-radius: 8px;
        }

        .item:hover {
          background: @color-f7;
          border-radius: 8px;
        }
      }
    }

    .right-con {
      flex: 1;
      margin-left: 20px;

      /deep/ .el-input__inner {
        height: 48px;
        line-height: 48px;
        border-radius: 8px;
      }

      .tab-cont {
        width: 100%;

        .filter {
          box-sizing: border-box;
          padding: 0 24px;
          height: 60px;
          border-bottom: @border-1-fo;

          .tabs {
            .tab {
              padding: 0 16px;
              font-size: 16px;
              color: @font-color-99;
              cursor: pointer;
            }

            .tab.active {
              position: relative;
              color: @theme-color;
            }

            .tab.active::before {
              content: '';
              display: block;
              position: absolute;
              left: 50%;
              bottom: -18px;
              width: 64px;
              height: 2px;
              background: @theme-color;
              transform: translateX(-50%);
            }
          }
        }
      }

      .title {
        box-sizing: border-box;
        padding: 20px 24px 12px 24px;

        .row {
          padding-bottom: 8px;
          border-bottom: @border-1-fo;
        }

        .name {
          font-weight: 500;
          font-size: 22px;
          color: @font-color-14;
        }

        .btn {
          box-sizing: border-box;
          padding: 0;
          width: 58px;
          height: 32px;
          line-height: 32px;
          font-size: 16px;
          text-align: center;
          color: @font-color-26;
          border-radius: 25px;
          border: none;
        }
      }
    }

    .mode-cont {
      box-sizing: border-box;
      margin-top: 8px;
      padding: 24px;

      .item-cont-row {
        margin-bottom: 16px;

        .row-label {
          margin-bottom: 8px;
          font-weight: 500;
          font-size: 14px;
          color: @font-color-66;
        }

        .row-avator {
          padding: 0 24px;
          height: 104px;
          background: @color-f7;
          border-radius: 16px;

          .avator-img {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            cursor: pointer;
          }

          .update-btn {
            padding: 0 24px;
            width: auto;
            height: 38px;
            line-height: 38px;
            text-align: center;
            background: @color-ff;
            border-radius: 19px;
            font-size: 14px;
            color: @font-color-26;
            border: @border-1-e5;
          }
        }

        .row-input {
          .el-input__inner {
            font-weight: 500;
            font-size: 16px;
            color: @font-color-26;
            height: 48px;
            line-height: 48px;
            background: @color-f7;
            border: none;
            border-radius: 8px;
          }

          .el-textarea__inner {
            padding: 15px;
            font-weight: 500;
            font-size: 16px;
            color: @font-color-26;
            height: 80px;
            min-height: 80px;
            max-height: 80px;
            background: @color-f7;
            border-radius: 8px;
            border: none;
          }

          .input-phone {
            /deep/ .el-input__inner {
              padding-left: 104px;
            }

            /deep/ .el-input__prefix {
              left: 16px;
            }

            .phone-prefix {
              box-sizing: border-box;
              line-height: 48px;
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 16px;
              color: @font-color-14;
            }
          }

          .send-btn {
            box-sizing: border-box;
            padding: 0;
            border: none;
            width: 132px;
            height: 48px;
            margin-left: 16px;
            line-height: 48px;
            text-align: center;
            font-size: 14px;
            color: @theme-color;
            background: @color-f7;
            border-radius: 6px;
          }

          .send-btn.disabled {
            color: #b3b3b3;
          }
        }

        .row-input.margin-bottom {
          margin-bottom: 8px;
        }

        .row-desc {
          margin-top: 6px;
          padding-left: 4px;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
        }

        .row-bind {
          padding: 12px 0;
          margin-bottom: 16px;

          .bind-left {
            width: 136px;

            .icon {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }

            .bind-frefix {
              font-size: 16px;
              color: @font-color-99;
            }
          }

          .bind-right {
            padding: 0 16px;

            .bind-text {
              font-weight: 500;
              font-size: 16px;
              color: @font-color-26;
            }

            .no-bind-text {
              color: #b3b3b3;
            }

            .no-bind,
            .has-bind {
              width: 24px;
              height: 24px;
              cursor: pointer;
            }
          }
        }
      }

      .handle {
        padding: 16px 0 24px 0;

        .default-btn {
          width: 120px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-weight: 400;
          border-radius: 25px;
        }

        .theme-btn {
          width: 260px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-weight: 500;
          border-radius: 25px;
        }

        .reset-btn {
          box-sizing: border-box;
          padding: 0;
          width: 120px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          background: @color-ff;
          border-radius: 25px;
          font-size: 16px;
          color: @font-color-26;
          border: @border-1-e5;
        }

        .reset-btn.disabled {
          background: @color-f7;
          color: @font-color-99;
        }

        .save-btn {
          box-sizing: border-box;
          padding: 0;
          width: 260px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          background: @theme-color;
          border: none;
          font-weight: 500;
          font-size: 16px;
          color: @color-ff;
          border-radius: 24px;
        }

        .save-btn.disabled {
          background: @theme-color-disable;
        }
      }
    }

    .item-avator {
      margin-top: 20px;
      margin-bottom: 12px;

      .avator {
        width: 96px;
        height: 96px;
        border-radius: 50%;
      }

      .info {
        margin-left: 24px;

        .name {
          font-weight: 500;
          font-size: 20px;
          color: @font-color-14;
        }

        .id {
          margin-top: 11px;

          .text {
            padding: 2px 8px;
            font-weight: 500;
            font-size: 12px;
            color: @theme-color;
            border-radius: 4px;
            border: 1px solid #ff967b;
          }
        }
      }
    }

    .address-title {
      padding: 0 24px;

      .mode-title {
        display: none;
      }

      .mode-desc {
        font-weight: 400;
        font-size: 14px;
        color: @font-color-99;
      }
    }

    .address-cont {
      /deep/ .el-textarea__inner {
        padding: 16px;
        font-weight: 500;
        font-size: 14px;
        color: @font-color-14;
        height: 80px;
        min-height: 80px;
        max-height: 80px;
        background: @color-f7;
        border-radius: 8px;
        border: none;
      }
    }

    .logout-cont {
      padding: 0 24px;
      margin-top: 32px;

      .item-avator {
        margin: 0;
      }

      .desc {
        margin-top: 20px;

        .desc-item {
          margin-top: 8px;
          font-weight: 500;
          font-size: 14px;
          color: @font-color-26;
        }
      }

      .remark {
        margin-top: 12px;
        padding: 12px;
        background: @color-f7;
        border-radius: 8px;

        .remark-title {
          padding-bottom: 4px;
          font-weight: 500;
          font-size: 14px;
          color: @font-color-14;
        }

        .remark-item {
          margin-top: 4px;
          font-size: 12px;
          color: @font-color-66;
        }
      }

      .theme-btn {
        margin-top: 32px;
        width: 260px;
        height: 50px;
        line-height: 50px;
      }
    }

    .info-cont {
    }

    .unbind-dialog {
      .concat {
        margin-top: 44px;

        .img {
          width: 64px;
          height: 64px;
        }

        .icon {
          width: 32px;
          height: 32px;
          margin: 0 20px;
        }
      }
    }
  }

  @media screen and (max-width: 992px) and (min-width: 768px) {
    .confirm-dialog {
      .handle {
        .btn {
          width: 200px;
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .user-detail-page {
      .detail-title {
        display: none;
      }

      .cont-box {
        padding-bottom: 50px;
      }

      .left-tab {
        display: none;
      }

      .mobile-tabs {
        display: block;
        padding: 0 16px;

        .line {
          width: 100%;
          height: 1px;
          margin-bottom: 4px;
          background: @color-e5;
        }

        .tabs {
          width: 100%;
          overflow-x: auto;
          height: 50px;

          .tab {
            margin-right: 24px;
            font-size: 14px;
            color: @font-color-99;
            flex-shrink: 0;
          }

          .tab.active {
            position: relative;
            font-weight: 500;
            font-size: 16px;
            color: @font-color-14;
          }

          .tab.active::before {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -4px;
            width: 16px;
            height: 2px;
            background: #383838;
            border-radius: 3px;
            transform: translateX(-50%);
          }
        }
      }

      .right-con {
        flex: 1;
        margin-left: 0px;

        /deep/ .el-input__inner {
          height: 48px;
          line-height: 48px;
          border-radius: 8px;
        }

        .tab-cont {
          width: 100%;

          .filter {
            box-sizing: border-box;
            padding: 0 24px;
            height: 60px;
            border-bottom: @border-1-fo;

            .tabs {
              .tab {
                padding: 0 16px;
                font-size: 16px;
                color: @font-color-99;
                cursor: pointer;
              }

              .tab.active {
                position: relative;
                color: @theme-color;
              }

              .tab.active::before {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                bottom: -18px;
                width: 64px;
                height: 2px;
                background: @theme-color;
                transform: translateX(-50%);
              }
            }
          }
        }

        .title {
          display: none;
        }
      }

      .mode-cont {
        margin-top: 8px;
        padding: 16px;

        .item-cont-row {
          margin-bottom: 16px;

          .row-label {
            margin-bottom: 8px;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }

          .row-avator {
            padding: 0 16px;
            height: 80px;
            background: @color-f7;
            border-radius: 16px;

            .avator-img {
              width: 56px;
              height: 56px;
              border-radius: 50%;
            }

            .update-btn {
              padding: 0 16px;
              width: auto;
              height: 32px;
              line-height: 32px;
              background: @color-ff;
              font-weight: 400;
              font-size: 14px;
              color: @font-color-26;
              border-radius: 19px;
              border: @border-1-e5;
            }
          }

          .row-input {
            .el-input__inner {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
              height: 48px;
              line-height: 48px;
            }

            .el-textarea__inner {
              padding: 15px;
              font-weight: 500;
              font-size: 16px;
              color: @font-color-26;
              height: 80px;
              min-height: 80px;
              max-height: 80px;
              background: @color-f7;
              border-radius: 8px;
              border: none;
            }

            .input-phone {
              /deep/ .el-input__inner {
                padding-left: 64px;
              }

              /deep/ .el-input__prefix {
                left: 16px;
              }

              .phone-prefix {
                box-sizing: border-box;
                line-height: 48px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-14;
              }
            }

            .send-btn {
              box-sizing: border-box;
              padding: 0;
              border: none;
              width: 132px;
              height: 48px;
              margin-left: 16px;
              line-height: 48px;
              text-align: center;
              font-size: 14px;
              color: @theme-color;
              background: @color-f7;
              border-radius: 6px;
            }

            .send-btn.disabled {
              color: #b3b3b3;
            }
          }

          .row-input.margin-bottom {
            margin-bottom: 8px;
          }

          .row-desc {
            margin-top: 4px;
            padding-left: 0px;
            font-size: 12px;
            color: @font-color-99;
          }

          .row-bind {
            padding: 12px 0;
            margin-bottom: 8px;

            .bind-left {
              width: 148px;

              .bind-frefix {
                font-size: 14px;
                color: #b3b3b3;
              }
            }

            .bind-right {
              padding: 0;

              .bind-text {
                font-size: 14px;
                color: @font-color-14;
              }

              .no-bind-text {
                color: #cccccc;
              }

              .no-bind,
              .has-bind {
                width: 24px;
                height: 24px;
                cursor: pointer;
              }
            }
          }
        }

        .handle {
          padding: 0px;
          margin-top: 24px;

          .default-btn {
            width: 135px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-right: 8px;
          }

          .theme-btn {
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-left: 0px;
          }

          .reset-btn {
            box-sizing: border-box;
            padding: 0;
            width: 135px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: @color-ff;
            border-radius: 25px;
            font-size: 14px;
            color: @font-color-99;
            border: @border-1-e5;
          }

          .reset-btn.disabled {
            background: @color-f7;
            color: #cccccc;
          }

          .save-btn {
            box-sizing: border-box;
            padding: 0;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: @theme-color;
            border: none;
            font-weight: 500;
            font-size: 14px;
            color: @color-ff;
            border-radius: 25px;
            border: 1px solid @theme-color;
          }

          .save-btn.disabled {
            background: @theme-color-disable;
            border: 1px solid @theme-color-disable;
          }
        }
      }

      .item-avator {
        margin: 0;

        .avator {
          width: 56px;
          height: 56px;
        }

        .info {
          margin-left: 8px;

          .name {
            font-weight: 500;
            font-size: 20px;
            color: @font-color-14;
          }

          .id {
            margin-top: 6px;

            .text {
              padding: 0px;
              font-weight: 400;
              font-size: 12px;
              color: @font-color-99;
              border-radius: 0px;
              border: none;
            }
          }
        }
      }

      .address-title {
        margin-top: 16px;
        padding: 0 16px;

        .mode-title {
          display: block;
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
          margin-bottom: 8px;
        }

        .mode-desc {
          font-size: 12px;
        }
      }

      .address-cont {
        margin-top: 0px;

        /deep/ .el-textarea__inner {
          height: 96px;
          min-height: 96px;
          max-height: 96px;
        }
      }

      .logout-cont {
        padding: 0 16px;
        margin-top: 24px;

        .desc {
          margin-top: 16px;

          .desc-item {
            margin-top: 16px;
            font-weight: 500;
            font-size: 13px;
            color: @font-color-14;
          }
        }

        .remark {
          margin-top: 32px;
          padding: 0px;
          background: @color-ff;
          border-radius: 8px;

          .remark-title {
            padding-bottom: 4px;
            font-weight: 500;
            font-size: 14px;
            color: @font-color-14;
          }
        }

        .theme-btn {
          display: block;
          margin: 0 auto;
          margin-top: 72px;
          width: 168px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }

      .info-cont {
      }
    }
  }

  @media screen and (max-width: 767px) {
    .confirm-dialog {
      .handle {
        .btn {
          width: 200px;
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .user-detail-page {
      .detail-title {
        display: none;
      }

      .cont-box {
        padding-bottom: 50px;
      }

      .left-tab {
        display: none;
      }

      .mobile-tabs {
        display: block;
        padding: 0 16px;

        .line {
          width: 100%;
          height: 1px;
          margin-bottom: 4px;
          background: @color-e5;
        }

        .tabs {
          width: 100%;
          overflow-x: auto;
          height: 50px;

          .tab {
            margin-right: 24px;
            font-size: 14px;
            color: @font-color-99;
            flex-shrink: 0;
          }

          .tab.active {
            position: relative;
            font-weight: 500;
            font-size: 16px;
            color: @font-color-14;
          }

          .tab.active::before {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: -4px;
            width: 16px;
            height: 2px;
            background: #383838;
            border-radius: 3px;
            transform: translateX(-50%);
          }
        }
      }

      .right-con {
        flex: 1;
        margin-left: 0px;

        /deep/ .el-input__inner {
          height: 48px;
          line-height: 48px;
          border-radius: 8px;
        }

        .tab-cont {
          width: 100%;

          .filter {
            box-sizing: border-box;
            padding: 0 24px;
            height: 60px;
            border-bottom: @border-1-fo;

            .tabs {
              .tab {
                padding: 0 16px;
                font-size: 16px;
                color: @font-color-99;
                cursor: pointer;
              }

              .tab.active {
                position: relative;
                color: @theme-color;
              }

              .tab.active::before {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                bottom: -18px;
                width: 64px;
                height: 2px;
                background: @theme-color;
                transform: translateX(-50%);
              }
            }
          }
        }

        .title {
          display: none;
        }
      }

      .mode-cont {
        margin-top: 8px;
        padding: 16px;

        .item-cont-row {
          margin-bottom: 16px;

          .row-label {
            margin-bottom: 8px;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }

          .row-avator {
            padding: 0 16px;
            height: 80px;
            background: @color-f7;
            border-radius: 16px;

            .avator-img {
              width: 56px;
              height: 56px;
              border-radius: 50%;
            }

            .update-btn {
              padding: 0 16px;
              width: auto;
              height: 32px;
              line-height: 32px;
              background: @color-ff;
              font-weight: 400;
              font-size: 14px;
              color: @font-color-26;
              border-radius: 19px;
              border: @border-1-e5;
            }
          }

          .row-input {
            .el-input__inner {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
              height: 48px;
              line-height: 48px;
            }

            .el-textarea__inner {
              padding: 15px;
              font-weight: 500;
              font-size: 16px;
              color: @font-color-26;
              height: 80px;
              min-height: 80px;
              max-height: 80px;
              background: @color-f7;
              border-radius: 8px;
              border: none;
            }

            .input-phone {
              /deep/ .el-input__inner {
                padding-left: 64px;
              }

              /deep/ .el-input__prefix {
                left: 16px;
              }

              .phone-prefix {
                box-sizing: border-box;
                line-height: 48px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-14;
              }
            }

            .send-btn {
              box-sizing: border-box;
              padding: 0;
              border: none;
              width: 132px;
              height: 48px;
              margin-left: 16px;
              line-height: 48px;
              text-align: center;
              font-size: 14px;
              color: @theme-color;
              background: @color-f7;
              border-radius: 6px;
            }

            .send-btn.disabled {
              color: #b3b3b3;
            }
          }

          .row-input.margin-bottom {
            margin-bottom: 8px;
          }

          .row-desc {
            margin-top: 4px;
            padding-left: 0px;
            font-size: 12px;
            color: @font-color-99;
          }

          .row-bind {
            padding: 12px 0;
            margin-bottom: 8px;

            .bind-left {
              width: 148px;

              .bind-frefix {
                font-size: 14px;
                color: #b3b3b3;
              }
            }

            .bind-right {
              padding: 0;

              .bind-text {
                font-size: 14px;
                color: @font-color-14;
              }

              .no-bind-text {
                color: #cccccc;
              }

              .no-bind,
              .has-bind {
                width: 24px;
                height: 24px;
                cursor: pointer;
              }
            }
          }
        }

        .handle {
          padding: 0px;
          margin-top: 24px;

          .default-btn {
            width: 135px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-right: 8px;
          }

          .theme-btn {
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-left: 0px;
          }

          .reset-btn {
            box-sizing: border-box;
            padding: 0;
            width: 135px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: @color-ff;
            border-radius: 25px;
            font-size: 14px;
            color: @font-color-99;
            border: @border-1-e5;
          }

          .reset-btn.disabled {
            background: @color-f7;
            color: #cccccc;
          }

          .save-btn {
            box-sizing: border-box;
            padding: 0;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: @theme-color;
            border: none;
            font-weight: 500;
            font-size: 14px;
            color: @color-ff;
            border-radius: 25px;
            border: 1px solid @theme-color;
          }

          .save-btn.disabled {
            background: @theme-color-disable;
            border: 1px solid @theme-color-disable;
          }
        }
      }

      .item-avator {
        margin: 0;

        .avator {
          width: 56px;
          height: 56px;
        }

        .info {
          margin-left: 8px;

          .name {
            font-weight: 500;
            font-size: 20px;
            color: @font-color-14;
          }

          .id {
            margin-top: 6px;

            .text {
              padding: 0px;
              font-weight: 400;
              font-size: 12px;
              color: @font-color-99;
              border-radius: 0px;
              border: none;
            }
          }
        }
      }

      .address-title {
        margin-top: 16px;
        padding: 0 16px;

        .mode-title {
          display: block;
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
          margin-bottom: 8px;
        }

        .mode-desc {
          font-size: 12px;
        }
      }

      .address-cont {
        margin-top: 0px;

        /deep/ .el-textarea__inner {
          height: 96px;
          min-height: 96px;
          max-height: 96px;
        }
      }

      .logout-cont {
        padding: 0 16px;
        margin-top: 24px;

        .desc {
          margin-top: 16px;

          .desc-item {
            margin-top: 16px;
            font-weight: 500;
            font-size: 13px;
            color: @font-color-14;
          }
        }

        .remark {
          margin-top: 32px;
          padding: 0px;
          background: @color-ff;
          border-radius: 8px;

          .remark-title {
            padding-bottom: 4px;
            font-weight: 500;
            font-size: 14px;
            color: @font-color-14;
          }
        }

        .theme-btn {
          display: block;
          margin: 0 auto;
          margin-top: 72px;
          width: 168px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }

      .info-cont {
      }
    }
  }
</style>
